<template>
  <layout :appHeader="{ title: $route.name }">
    <view class="course" v-if="offline.length > 0">
      <view class="offline">
        <view class="item" v-for="(item, index) in offline" :key="index">
          <image class="cover-image" :src="item.course.coverImage" />
          <view class="content">
            <view class="title">{{ item.course.title }}</view>
            <view class="detail-button" @click="DetailFn(item)" v-if="item.workOrder.currentProcedure && item.workOrder.currentProcedure.sn === 2">培訓反饋</view>
          </view>
          <view class='sellout_box' v-if="item.workOrder.currentProcedure && item.workOrder.currentProcedure.sn === 3">
            <view class='sellout'>
              审核中
            </view>
          </view>
          <view class='sellout_box' v-if="item.workOrder.status === 2">
            <view class='sellout success'>
              已完成
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="no-data">
      <image class="no-data-image" src="https://perfectdiary-public-dev.oss-cn-shenzhen.aliyuncs.com/material/image/2021/07/7ae9b327b8eb4e29a712b87518049e78.png" />
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      offline: []
    };
  },

  onLoad(options) {
    this.getAppointmentList();
  },
  methods: {
    getAppointmentList() {
      uni.showLoading({
        title: '加載中',
        mask: true
      })
      uni.$API.WorkOrder.getCourseAppointment().then(res => {
        if (res.status === 0) {
          this.offline = res.data.list
        }
        uni.hideLoading();
      }).catch(_ => {
        uni.hideLoading();
      })
    },
    DetailFn(obj) {
      console.log(obj)
      uni.navigateTo({
        url: `pages/account/myFeedback/index?id=${obj.id}&workOrderId=${obj.workOrder.id}`
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.sellout_box {
  width: 48%;
  height: 140rpx;
  margin: 10rpx 0;
  overflow: hidden;
  position: absolute;
  right: -34rpx;
  top: -34rpx;
  font-size: 20rpx;
}
.success {
  background-color: #3ab29a !important;
}
.sellout {
  background-color: #515cc3;
  color: white;
  width: 70%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  margin-left: 45%;
  margin-top: 40rpx;
  position: absolute;
  transform: rotate(45deg);
}
.course {
  font-size: 28rpx;
  color: rgba(66, 71, 95, 1);
  font-weight: bold;

  .offline {
    .header-title {
      height: 88rpx;
      line-height: 88rpx;
    }
    .item {
      padding: 30rpx;
      margin-top: 10px;
      background: #fff;
      display: flex;
      margin-bottom: 50rpx;
      position: relative;
      overflow: hidden;
      &:last-child {
        margin-bottom: 10rpx;
      }
      .cover-image {
        width: 288rpx;
        height: 162rpx;
      }
      .content {
        width: 74%;
        margin-left: 28rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          width: 374rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 40rpx;
        }
        .detail-button {
          display: inline-block;
          width: 260rpx;
          height: 104rpx;
          line-height: 104rpx;
          border-radius: 52rpx;
          background: #515cc3;
          color: #fff;
          font-size: 40rpx;
          -webkit-transform: scale(0.5);
          text-align: center;
          align-self: flex-end;
          margin-right: -65rpx;
        }
      }
    }
  }
}
.no-data {
  height: 93vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .no-data-image {
    width: 280rpx;
    height: 280rpx;
  }
}
</style>